<template>
    <div class="de">
        <h3>根组件1</h3>
        <p>从 vue x 中获取值 : {{ count  }}</p>
        <button @click="handleAdd(1)">值 + 1</button>
        <button @click="handleAdd(2)">值 + 2</button>
        <button @click="handleAdd(5)">值 + 5</button>
        <button @click="handle">1秒之后修改值为666</button>
        <hr>
        <div>
            <!-- 测试访问模块中的 state - 通过mapState -->
          <div>   {{ user.userInfo.name }}</div>
         <div>    {{ setting.theme }}</div>
         <div>{{ userInfo.age }}</div>
         <!-- 基础的访问模块getters -->
         <div>{{ $store.getters['user/UpName'] }}</div>
         <!-- 基于子模块 -->
      <!--     <div>{{ UpName }}</div> -->
           <button @click="ChangeInformation"> 1秒后更新颜色 </button>
           <button @click="Change('red')">更新颜色</button>
        </div>
    </div>
</template>
<style>
.de{
    width: 300px;

    border: 1px solid rgb(108, 107, 105);
    text-align: center;
    margin-left: 20px;
}
</style>
<script>

import { mapActions, mapGetters, mapState } from 'vuex';

export default {
computed :{
    //映射子模块
    ...mapState(['count','title','user','setting']),
    //基于子模块去映射 ,要开启命名空间
    ...mapState('user',['userInfo']),
    //基于子模块去映射 ,要开启命名空间
    ...mapGetters('user',['UpName']),

},
methods :{
    handleAdd(n){
        //需要提交 mutations 函数
        this.$store.commit('changeCount',n)
    },
    handle(){
       // 调用 actions 
       //this.$store.dispatch('action名字',额外参数)
       this.$store.dispatch('changeCountAction',666)
    },
    ChangeInformation(){
        //模块调用
        this.$store.dispatch('setting/Change','red')
    },    ...mapActions('setting',['Change'])
},}

</script>
